import React from 'react'
import { Routes, Route, Link, useRoutes, NavLink } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Test from './pages/Test'
import Demo from './pages/Demo'

export default function App() {
  return (
    <div>
      {/* NavLink自定义高亮的类名 */}
      <NavLink
        to="/home"
        // 自定义类名
        className={({ isActive }) => {
          // 一旦路径切换了,这个回调就会执行
          return isActive ? 'done' : ''
        }}
        end // end的作用: 当嵌套路由的导航按钮高亮,当前导航按钮不高亮
        replace // 页面切换时,替换历史记录. 默认还是添加历史记录
      >
        首页
      </NavLink>
      <NavLink
        to="/about?name=ls&age=99"
        className={({ isActive }) => {
          // 一旦路径切换了,这个回调就会执行
          return isActive ? 'done' : ''
        }}
        end
      >
        关于
      </NavLink>
      <hr />

      {/* <Routes>
        <Route path="home" element={<Home />}>
          <Route path="test" element={<Test />}></Route>
          <Route path="demo" element={<Demo />}></Route>
        </Route>
        <Route path="about">
          <Route path=":id" element={<About />}></Route>
          <Route path="" element={<About />}></Route>
        </Route>
      </Routes> */}
      {useRoutes([
        {
          path: 'home',
          element: <Home />,
          children: [
            {
              path: 'test',
              element: <Test />,
            },
            {
              path: 'demo',
              element: <Demo />,
            },
          ],
        },
        {
          path: 'about',
          children: [
            {
              path: ':id',
              element: <About />,
            },
            {
              path: '',
              element: <About />,
            },
          ],
        },
      ])}
    </div>
  )
}
